<template>
  <div>
    <!-- 导航菜单 -->
    <div class="navbar_con">
      <div class="navbar">
        <h1 class="fl">全部商品分类</h1>
        <!-- 无序列表 -->
        <ul class="navlist fl">
          <li><a href="">首页</a></li>
          <li class="interval">|</li>
          <li><a href="">手机生鲜</a></li>
          <li class="interval">|</li>
          <li><a href="">抽奖</a></li>
        </ul>
      </div>
    </div>

    <!-- 商品分类 -->
    <div class="center_con">
      <!-- 商品分类模块 -->
      <ul class="subnav fl">

        <!-- 按照如下格式实现商品分类的列表 -->
        <!-- <li><a href="#model02" class="seafood">海鲜水产</a></li> -->
       
      </ul>

      <!-- 轮播图 -->
      <el-carousel class="slide fl">
        
        <!-- 参考如下方式及ElementUI 实现轮播图的布局 -->
        <!-- <li><img src="../assets/slide02.jpg" alt="幻灯片" /></li>
          <li><img src="../assets/slide03.jpg" alt="幻灯片" /></li>
          <li><img src="../assets/slide04.jpg" alt="幻灯片" /></li> -->
      </el-carousel>
      

      <!-- 广告模块 -->
      <div class="adv fl">
        <a href="#"><img src="../assets/adv01.jpg" /></a>
        <a href="#"><img src="../assets/adv02.jpg" /></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Slide",
  data() {
    return {
      
    };
  },
  props: ["goodCates_list", "slides_list"],

  components: {},

  created() {},

  mounted() {},

  methods: {},
};
</script>

<style scoped>
* {
  margin: 0;
}

/* 空的div块容器 */
.navbar_con {
  height: 40px;
  border-bottom: 2px solid #39a93e;
}

/* 导航菜单 */
.navbar {
  width: 1200px;
  margin: 0 auto;
  /* background-color: pink; */
}

/* 全部商品分类的标题  h1块元素独占一行*/
.navbar h1 {
  width: 200px;
  height: 40px; /*与父容器一样高*/
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: #39a93e;
}
.fl {
  float: left;
}

/* 整个无序列表 */
.navlist {
  margin-left: 34px;
  list-style-type: none;
}

.navlist li {
  height: 40px; /*高度占满外部父容器*/
  float: left;
  line-height: 40px;
}

.navlist li a {
  color: #666;
  font-size: 14px;
  text-decoration-line: none;
}

/* 超链接 字体颜色 */
.navlist li a:hover {
  color: #ff8800;
}

/* 分割竖线 */
.navlist .interval {
  margin: 0 15px;
}

/* 中间的 商品分类 轮播图 广告  大块 */
.center_con {
  width: 1200px;
  height: 270px;
  margin: 0 auto;
}
/* 前后清除浮动 */
.clearfix:before,
.clearfix:after {
  clear: both;
}

/* 商品分类 列表 */
.subnav {
  width: 198px;
  height: 270px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  list-style-type: none;
  padding-left: 0; /*解决 右边偏移问题*/
}

/* 每个列表项 的导向箭头 */
.subnav li {
  height: 44px;
  border-bottom: 1px solid #eee;
  background: url(../assets/icons.png) 178px -257px no-repeat #fff;
  /* 图片地址   位置   重复   背景色 */
  text-align: center;
}

.subnav li a {
  display: block;
  height: 44px;
  line-height: 44px;
  text-indent: 1px;
  font-size: 14px;
  color: #333;
  /* background-color: pink; */
  text-decoration-line: none;
}

.subnav li a:hover {
  color: #ff8800;
}

/* 类别前的图标 */
.subnav li .fruit {
  background: url(../assets/icons.png) 28px 0px no-repeat;
}

.subnav li .seafood {
  background: url(../assets/icons.png) 28px -43px no-repeat;
}

.subnav li .meet {
  background: url(../assets/icons.png) 28px -86px no-repeat;
}

.subnav li .egg {
  background: url(../assets/icons.png) 28px -132px no-repeat;
}

.subnav li .vegetables {
  background: url(../assets/icons.png) 28px -174px no-repeat;
}

.subnav li .ice {
  background: url(../assets/icons.png) 28px -220px no-repeat;
}

/* 轮播图 */
.slide {
  width: 760px;
  height: 270px;
  position: relative;
  overflow: hidden;
}
.slide li {
  list-style-type: none;
}
/* 
.slide .slide_pics {
  position: relative;
  left: 0;
  top: 0;
  width: 760px;
  height: 270px;
} */
/* 
.slide .slide_pics li {
  width: 760px;
  height: 270px;
  position: absolute;
  left: 0;
  top: 0;
} */
/* 
.slide .prev,
.slide .next {
  width: 17px;
  height: 23px;
  background: url(../assets/icons.png) left -388px no-repeat;
  position: absolute;
  left: 11px;
  top: 122px;
  cursor: pointer;
} */
/* 
.slide .next {
  background-position: left -428px;
  left: 732px;
} */
/* 
.points {
  width: 100%;
  height: 11px;
  position: absolute;
  left: 0;
  top: 250px;
  text-align: center;
} */
/* 
.points li {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 5px;
  background-color: #9f9f9f;
  border-radius: 50%;
  cursor: pointer;
}

.points li.active {
  background-color: #cecece;
} */

.adv {
  width: 240px;
  height: 270px;
  overflow: hidden;
  background-color: gold;
}

.adv a {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  border: 0;
  width: 240px;
  height: 135px;
}
</style>
